<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>CoCreate-kanban Documentation | CoCreateJS </title>
        <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
        <meta name="description" content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
        <meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
        <meta name="robots" content="index,follow" />
       	<meta property="og:image" content="https://cdn.cocreate.app/docs/kanban.png">
        
        <!-- CoCreate CSS -->
        <link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css"/>
        <link rel="stylesheet" href="/docs/index.css" data-collection="files" data-document_id="60888216117c640e7596303f" name="src" type="text/css" data-save="true"/>
	</head>

    <body>
		<nav class="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px" data-main_content_id="content" data-scroll="sticky-nav,hide-nav" data-scroll_up="10" data-scroll_down="10" data-collection="components" data-document_id="60395ef42b3ac232657040fd" name="html">
		</nav>
		<sidenav id="menuL" class="cocreate-sidenav background:whitesmoke" data-main_content="content" sidenav-default_desktop="expanded" sidenav-default_tablet="offcanvas" sidenav-ontoggle_desktop="offcanvas" sidenav-ontoggle_tablet="expanded">
			<menu data-collection="components" data-document_id="603717b07de7fb350ae9fec8" name="html"></menu>
			<div class="resizeHandler"></div>
	    </sidenav>
        <main class="padding-top:15px padding:15px@lg@xl" data-main_content_id="content" id="cocreate-kanban">
            <div class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
                <div class="display:flex align-items:center">
                    <h2>CoCreate-kanban</h2>
                </div>
                <div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
                    <div class="display:flex align-items:center transition:0.3s padding-left:10px" data-share_network="true" data-share_text="Enter decription here" data-share_title="testing im a title" data-share_height="600" data-share_width="700" data-share_media="https://cdn.cocreate.app/docs/kanban.png" data-hover="display:block!important" data-hover_target=".social-networks">
                        <div class="display:none social-networks">
                            <a class="margin-right:15px" data-share_network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
                            <a class="margin-right:15px" data-share_network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
                            <a class="margin-right:15px" data-share_network='instagram' title="Share on instagram"><i class="fab fa-instagram"></i></a>
                        </div>
                        <a class="margin-right:15px" data-share_network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
                    </div>
                    <a href="https://github.com/CoCreate-app/CoCreate-kanban" target="_blank" class="margin-right:15px"><i class="fab fa-github"></i></a>
                </div>
            </div>
            <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">A simple HTML5, CSS and pure javascript component. Easy configuration using data-attributes and highly styleable.</h1>
            <div id="kanban-section" class="display:flex flex-wrap:wrap">
                <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
    
                <div id="kanban-install" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#kanban-install-section">
                        <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#kanban-install"]'>
                            <h2 class="padding:5px_0px">Install</h2>
                            <a class="margin-left:10px display:none" href="#kanban-install"><i class="fas fa-link"></i></a>
                        </span>
                    </div>
                <pre><code class="language-bash">npm i @cocreate/kanban</code></pre>
                <p class="padding:10px_0px line-height:1.5">Or you can use cdn link:</p>
                <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/kanban/latest/CoCreate-kanban.min.js&lt;/script&gt;</code></pre>

                <div id="kanban-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#kanban-usage-section">
                        <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#kanban-usage"]'>
                            <h2 class="padding:5px_0px">Usage</h2>
                            <a class="margin-left:10px display:none" href="#kanban-usage"><i class="fas fa-link"></i></a>
                        </span>
                    </div>
                    <div class="">
                        <p class="padding:10px_0px line-height:1.5">This is kanban usage</p>
                
                        <div class="flex-grow:1 min-width:300px width:100%">
                            <pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
                        </div>
                        <p class="padding:10px_0px line-height:1.5">This is kanban usage</p>
                        <p class="padding:10px_0px line-height:1.5">This is kanban usage</p>
                    </div>
                    <div id="kanban-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#kanban-attributes-section">
                        <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#kanban-attributes"]'>
                            <h2 class="padding:5px_0px">Attributes</h2>
                            <a class="margin-left:10px display:none" href="#kanban-attributes"><i class="fas fa-link"></i></a>
                        </span>
                    </div>
                    <ul class="list-style-type:none ">
                        <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
                            <h4><span>data-kanban</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
                            <p>kanban-attribute</p>
                        </li>
                        <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
                            <h4><span>data-kanban</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
                            <p>kanban-attribute</p>
                        </li>
                    </ul>
                </div>
                
                <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
                    <!-- SandBox -->
                    <div id="kanban-demo" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#kanban-demo-section">
                        <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#kanban-demo"]'>
                            <h2 class="padding:5px_0px">Demo</h2>
                            <a class="margin-left:10px display:none" href="#kanban-demo"><i class="fas fa-link"></i></a>
                        </span>
                    </div>
                    <div class="position:sticky top:0 padding:15px_0px height:100vh">
    			    <div class="container svColumn overflow:hidden card border-radius:2px width:auto height:100%" id="form-sandbox">
    			       <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6 z-index:7">
    			        <a class="margin-right:10px" id="preview" data-show="preview" data-hide="code"><i class="far fa-eye"></i></a>
    			        <a class="margin-right:10px hidden" id="code" data-show="code" data-hide="preview"><i class="fas fa-code"></i></a>
    			        <!--<a class="margin-right:10px"><i class="far fa-window-maximize"></i></a>-->
    					<a target="modal" href="module_activity_datatable.html"
    				  	     data-pass_collection="modules"
    				  	     data-pass_document_id=""
    				  	     data-pass_fetch_value=""
    				  	     data-pass_prefix=""
    				  	     data-pass_to="render"
    				  	     data-modal_width="600px"
    				  	     data-modal_height="400px"
    				  	     data-modal_color="#229954"
    				  	     data-modal_header="false"
    				  	     class="margin-right:10px">
    				  	    <i class="fas fa-external-link-alt"></i>
    				     </a>        
    				     <a class="margin-right:5px" data-fullscreen target="#playground-1"><i class="fas fa-expand"></i></a>
    			        </div>
    			
    			        <div class="svRow">
    			            
    			            <div class="svColumn">
    			            	
    			                <div class="svPanel">
    			                    <div data-realtime="false"
    			                        data-collection="modules"
    			                        data-document_id="5eefe30952c6e94c75fb5e3f"
    			                        name="html" 
    			                        id="7" 
    			                        class="codemirror min-width:300px">
    			                    </div>
    			                </div>
    			            	<div class="svSplitter svHorizontal"> </div>
    			
    			                <div class="svPanel">
    			                    <iframe data-get_value="7" frameBorder="0" height="100%" width="100%"  class="min-width:300px"></iframe>
    			                </div>
    			                
    			            </div>
    			        </div>
    			    </div>
    			    <!-- End SandBox -->
    			    </div>
                </div>
                
            </div>				
        	<button href="https://github.com/CoCreate-app/CoCreate-kanban/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue grow-hover border-radius:50%">
		        <i class="fas fa-pencil-alt"></i>
	        </button>
		</main>
        <script>
            var config = {
                apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
                organization_Id: '5de0387b12e200ea63204d6c',
                host: 'wss://server.cocreate.app:8088'
            }
        </script>

    
        <!--CoCreateJS-->
        <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
    </body>
</html>